<template>
  <div class="">
    <!-- 浏览记录 -->
    <div class="nav">
      <ul>
        <li @click="fanh">
          <div class="img">
            <img src="../assets/syb.png" alt="" />
          </div>
        </li>
        <li><span>浏览记录</span></li>
      </ul>
    </div>
    <div class="kuanton" v-if="datas.length != 0">
      <ul>
        <li v-for="(item, index) in datas" :key="index">
          <div class="coonte">
            <div class="img">
              <img :src="item.picUrl" alt="" />
            </div>
            <div class="text">
              <div class="texstitlie">
                <span>{{ item.name | zhiti }}</span>
                <div class="qian">
                  <span>{{ item.addTime | formatCtime }}</span>
                  <span>￥{{ item.retailPrice }}</span>
                </div>
              </div>
              <div class="gon">
                <span @click="toxiangq(item.goodsId)">查看详情</span>
                <span @click.stop="ondelete(index)">删除</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="contn" v-else>
      <div class="moang">
        <img src="../assets/w.png" alt="" />
      </div>

      <span class="text">暂无记录</span>
      <ul>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import API from "../http/API";
export default {
  name: "lljs",
  components: {
    [Toast.name]: Toast,
  },
  data() {
    return {
      index: 1,
      datas: [],
      chandu: 0,
      gengxing: true,
    };
  },

  activated() {
    this.guanb();
    this.http();
  },
  // mounted() {
  //   this.guanb();
  // },
  methods: {
    guanb() {
      window.addEventListener("scroll", this.lazyLoading);
    },
    http() {
      this.$get(API.GET_FOOTPRINT_LIST, {
        //        封装 token
        // ②page：当前页，默认 1
        // ③limit：每页条数，默认 10
        token: this.$store.state.token,
        page: this.index,
      })
        .then((res) => {
          console.log(res);
          this.chandu = res.data.pages;
          if (res.errmsg == "请登录") {
            Toast("请登录");
          }
          this.index++;
          this.datas = this.datas.concat(res.data.list);
        })
        .catch((err) => {});
    },

    lazyLoading() {
      this.$route.meta.Yaxis = window.pageYOffset;
      // console.log(this.$route.meta.Yaxis);
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight = document.documentElement.clientHeight;
      let scrollHeight = document.documentElement.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log("滚动到底部，触发");

        if (this.index <= this.chandu) {
          console.log(this.index);

          this.mai();
        }
      }
    },
    mai() {
      setTimeout(() => {
        console.log("发起网络请求");
        this.http();
      }, 500);
    },
    fanh() {
      this.$router.go(-1);
    },
    ondelete(e) {
      // ①封装 token
      // ②id：足迹 ID
      this.$post(API.POST_FOOTPRINT_DELETE, {
        token: this.$store.state.token,
        id: this.datas[e].id,
      }).then((res) => {
        if (res.errmsg == "成功") {
          Toast("删除成功");
          this.datas.splice(e, e);
        }
      });
    },
    toxiangq(e) {
      this.$router.push({
        path: "/details",

        query: { userId: e },
      });
    },
  },

  filters: {
    // 定义局部过滤器

    // 格式化时间
    formatCtime(dateStr) {
      // console.log(dateStr)

      let data = dateStr.split(" ");
      data.pop();

      return data[0];
    },
    zhiti(value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "...";
      }
      return value;
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  width: 100%;
  height: 50px;
  background-color: rgb(247, 251, 255);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 55;
  ul {
    margin-left: 10px;
    margin-right: 10px;
    // border: 1px solid #000;
    height: 100%;
    display: flex;
    align-items: center;
    li {
      &:nth-child(1) {
        width: 50px;
        height: 50px;
        // border: 1px solid #000;
        display: flex;
        align-items: center;
        .img {
          height: 20px;
          width: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      &:nth-child(2) {
        font-size: 17px;
      }
    }
  }
}
.kuanton {
  padding-top: 50px;
  // height: 1000px;
  margin-bottom: 10px;

  ul {
    margin-right: 5px;
    margin-left: 5px;
    display: flex;
    flex-wrap: wrap;

    li {
      margin-top: 10px;
      width: 50%;

      height: 220px;

      .coonte {
        border-radius: 5px;
        overflow: hidden;
        margin-right: 5px;
        margin-left: 5px;
        height: 100%;
        // border: 1px solid #000;
        background-color: rgb(248, 248, 248);
        .img {
          height: 150px;
          width: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          margin-left: 5px;
          margin-right: 5px;
          font-size: 16px;
          .texstitlie {
            display: flex;
            flex-direction: column;
            span {
              &:nth-child(1) {
                margin-bottom: 5px;
              }
            }
            .qian {
              display: flex;
              justify-content: space-between;
              span {
                &:nth-child(2) {
                  padding: 2px 2px 2px 2px;
                  border-radius: 3px;
                  color: rgb(238, 238, 238);
                  background-color: rgb(238, 95, 119);
                }
              }
            }
          }
          .gon {
            display: flex;
            align-items: center;
            height: 30px;
            // border: 1px solid #000;
            justify-content: space-between;
            span {
              padding: 5px 5px 5px 5px;
              color: rgb(243, 235, 235);
              border-radius: 5px;
              &:nth-child(1) {
                background-color: rgb(137, 188, 230);
              }
              &:nth-child(2) {
                background-color: rgb(235, 110, 110);
              }
            }
          }
        }
      }
      // border: 1px solid #000;
    }
  }
}
.contn {
  padding-top: 60px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .moang {
    width: 200px;
    height: 200px;
    // border: 1px solid #000;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .text {
    margin-top: 10px;
    font-size: 17px;
  }
}
</style>